<template name="cart">
	<view class="cartMainAre">
		<view v-for="(item,_index) in shopCartList" :key="_index" class="calc cartAre borderR">
			<view class="display flow shopTitleAre">
				<view class="checkAre" @click="selectshop(item.supplier_id)">
					<uni-icons class="icon" :type="'checkbox-filled'" :color="themeColor" size="16" v-if="item.isCheck"/>
					<uni-icons class="icon" :type="'circle'" :color="'grey'" size="16" v-else/>
				</view>
				<view class="display flow titleItemAre" @click="shopClick(item.supplier_id)">
					<image src="/static/images/icon/shopIcon.png" style="width: 32rpx;height: 29rpx;"></image>
					<text class="shopName">{{item.shop_content?item.shop_content.supplier_name:''}}</text>
					<uni-icons :type="'arrowright'" :color="'grey'" size="16" />
				</view>
			</view>
			<view class="display flow mainAre" v-for="(cell,_indx) in item.items" :key="_indx">
				<view class="FailureAre" v-if="cell.isSoldOut">
					<view class="Failure">售罄</view>
				</view>
				<view class="FailureAre" v-else-if="cell.isFailure">
					<view class="Failure">失效</view>
				</view>
				<view class="checkAre" v-else>
					<view @click="selectgoods(cell)">
						<uni-icons class="icon" :type="'checkbox-filled'" :color="themeColor" size="16" v-if="cell.isCheck"/>
						<uni-icons class="icon" :type="'circle'" :color="'grey'" size="16" v-else/>
					</view>
				</view>
				<image :src="cell.product_content.head_img" class="shopImg" @click="goodsClick(cell)"></image>
				<view class="display column mainItemAre">
					<text class="fontHide" @click="goodsClick(cell)">{{cell.product_content.product_name}}</text>
					<!-- <view class="display flow specificationAre">
						<text class="fontHide">{{cell.sku_list.properties}}</text>
						<uni-icons :type="'arrowdown'" :color="'#bcbcbc'" size="13" />
					</view> -->
					<text class="fontHide pColor">{{cell.sku_list.properties}}</text>
					<view class="display flow itemAre">
						<text class="price" decode>￥{{cell.price}} &nbsp;&nbsp; <text style="text-decoration: line-through;" class="pColor" v-if="cell.product_content.old_price && cell.product_content.old_price > cell.price">￥{{cell.product_content.old_price}}</text></text>
						<uni-number-box :min="1" :max="cell.sku_list.num" :value="Number(cell.num)" :list="cell" @change="numChange" @inputChange="inputChange" @modifyNumber="modifyNumber"/>
					</view>
				</view>
			</view>
		</view>
	</view>
	
</template>

<script>
	export default {
		name: "cart",
		props: ['shopCartList'],
		data() {
			return {
				themeColor: this.global.themeColor
			};
		},
		methods:{
			selectshop(id){
				this.$emit('selectshop',id)
			},
			selectgoods(list){
				if(list.isSoldOut || list.isFailure){
					return
				}
				this.$emit('selectgoods',list.product_id)
			},
			modifyNumber(arr){
				console.log(arr)
				this.$emit('modifyNumber',arr)
			},
			goodsClick(list){
				if(list.isSoldOut || list.isFailure){
					return
				}
				uni.navigateTo({
					url: '/subPackages/goods/goodsDetails/goodsDetails?id=' + list.product_id
				})
			},
			shopClick(id){
				uni.navigateTo({
					url: '/subPackages/goods/shopAre/shopAre?shopId=' + id
				})
			},
			numChange(value){
				console.log(value)
			},
			inputChange(value,id){
				this.$emit('inputChange',value,id)
			}
		}
	}
</script>

<style scoped lang="scss"> 
	@import '@/common/css/car.scss';
</style>
